<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体样式</title>
	<style type="text/css">
	   /* .in{font-size: 0.5in;}
	    .cm{font-size:0.5cm;}
	    .mm{font-size:5mm;}
	    .pt{font-size:15pt;}
	    .pc{font-size:2pc;}
	    .xxSmall{font-size:xx-small;}
		.xSmall{font-size:x-small;}
		.small{font-size:small;}
		.medium{font-size:medium;}
		.large{font-size:large;}
		.xLarge{font-size:x-large;}
		.xxLarge{font-size:xx-large;}  */
		p{font-size: 50px;}

		.larger{font-size:larger;}
		.smaller{font-size:smaller;}

		.em{font-size:2em;}

		.percent{font-size: 150%;}	
		
		#fontSize{font-size: 20px;} 
		.percent{font-size: 150%;} 
	</style>
</head>
<body>
	<!-- 相对单位 -->
	<p>文字大小px,受显示器分辨率影响</p>
	<p>文字大小<span class="larger">相对父元素的文字大小变大</span></p>
	<p>文字大小<span class="smaller">相对父元素的文字大小变小</span></p>
	<div id="fontSize">   
		<p>文字大小<span class="em">相对值em</span></p>
		<p class="percent">文字大小<span class="percent">相对值%</span></p>
	</div>
   	<!-- 绝对单位 -->
       <!--  <p>默认字体大小</p>	
	    <p class="in">文字大小是0.5in</p>
		<p class="cm">文字大小是0.5cm</p>
		<p class="mm">文字大小是5mm</p>
		<p class="pt">文字大小是15pt</p>
		<p class="pc">文字大小是2pc</p>
		<p class="xxSmall">文字大小是xx-small</p>
		<p class="xSmall">文字大小是x-small</p>
		<p class="small">文字大小是small</p>
		<p class="medium">文字大小是medium</p>
		<p class="large">文字大小是large</p>
		<p class="xLarge">文字大小是x-large</p>
		<p class="xxLarge">文字大小是xx-large</p> -->
</body>
</html>